<!-- 名片收藏 -->
<template>
	<view class="card-collection">
		<view class="card-collection-item">
			<u-tabs :list="tabList" :current="currentTab" @change="tabChange"></u-tabs>
			<view class="card-layout" v-for="(item, index) in dataList" :key="index" @click="jumpEdit(item.card_id)">
				<view class="u-flex card-left">
					<image :src="item.logo" class="card-img"></image>
					<view class="user_info">
						<view class="card-name u-m-b-5">{{ item.name }}</view>
						<view class="card-position u-m-b-5">{{ item.duties }}</view>
						<view class="card-company-and-time">{{ item.company }}</view>
					</view>
				</view>
				<view class="card-company-and-time card-time">{{ formatDate(item.start_time) }}</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				dataList: [], //内容数据
				formatDate,
				tabList: [{
					value: 1,
					name: '我看过'
				}, {
					value: 2,
					name: '看过我'
				}],
				currentTab: 0
			};
		},

		created() {
			this.initPage();
		},

		methods: {
			tabChange(index) {
				this.currentTab = index;
				this.initPage();
			},
			$onReachBottom() {
				this.loadMore();
			},
			loadMore() {
				this._load_data();
			},
			initPage() {
				let params = {
					type: this.tabList[this.currentTab].value
				};
				params.pk_id = params.type == 1 ? this.vuex_user.pk_id : this.vuex_user.card_id;
				this._init_data('GetBusinessCardBrowse', params);
			},
			// 跳转到名片详情
			jumpEdit(id) {
				this.$linkTo(`/package/business-card/share-card/index?id=${id}&noShare=${1}`)
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.card-collection-item {
		padding: 0 32rpx 150rpx;
		box-sizing: border-box;
	}

	.card-collection-title {
		width: 100%;
		height: 105rpx;
		line-height: 105rpx;
		font-size: 48rpx;
		font-weight: bold;
	}

	.card-layout {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		align-items: center;
		margin-bottom: 2rpx;
	}

	.card-name {
		font-size: 28rpx;
	}

	.card-layout {
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.user_info {
		width: 350rpx;
	}

	.card-company-and-time {
		font-size: 24rpx;
		color: #999999;
		word-break: break-all
	}

	.card-position {
		font-size: 20rpx;
		word-break: break-all
	}

	.card-time {
		// flex:1;
		width: 300rpx;
		margin-left: 15rpx;
		text-align: right;
	}

	.card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 28rpx;
	}
</style>
